<template>
  <div class="page">
    <!-- <div class="weui-search-bar">
      <div class="weui-search-bar__form">
        <div class="weui-search-bar__box">
          <icon class="weui-icon-search_in-box" type="search" size="14"></icon>
          <input type="text" class="weui-search-bar__input" placeholder="搜索" v-model="inputVal" :focus="inputShowed" @input="inputTyping" />
          <div class="weui-icon-clear" v-if="inputVal.length > 0" @click="clearInput">
            <icon type="clear" size="14"></icon>
          </div>
        </div>
        <label class="weui-search-bar__label" :hidden="inputShowed" @click="showInput">
          <icon class="weui-icon-search" type="search" size="14"></icon>
          <div class="weui-search-bar__text">搜索</div>
        </label>
      </div>
      <div class="weui-search-bar__cancel-btn" :hidden="!inputShowed" @click="hideInput">取消</div>
    </div>
    <div class="weui-cells searchbar-result" v-if="inputVal.length > 0">
      <navigator url="" class="weui-cell" hover-class="weui-cell_active">
        <div class="weui-cell__bd">
          <div>实时搜索文本</div>
        </div>
      </navigator>
      <navigator url="" class="weui-cell" hover-class="weui-cell_active">
        <div class="weui-cell__bd">
          <div>实时搜索文本</div>
        </div>
      </navigator>
      <navigator url="" class="weui-cell" hover-class="weui-cell_active">
        <div class="weui-cell__bd">
          <div>实时搜索文本</div>
        </div>
      </navigator>
      <navigator url="" class="weui-cell" hover-class="weui-cell_active">
        <div class="weui-cell__bd">
          <div>实时搜索文本</div>
        </div>
      </navigator>
    </div> -->
    <swiper class="swiper" indicator-dots autoplay>
      <block v-for="(item, index) in swiperList" :key="index">
        <swiper-item>
          <navigator :url="'/pages/detail/main?id=' + item.uri">
            <image :src="CDN + '/products/' + item.src" style="width: 100%; height: 200px" />
          </navigator>
        </swiper-item>
      </block>
    </swiper>

    <div class="weui-cell">
      <div class="weui-cell__hd">
        <div style="margin-right: 5px;vertical-align: middle;width:20px; height: 20px;">
          <open-data type="userAvatarUrl" lang="zh_CN"></open-data>
        </div>
      </div>
      <div class="weui-cell__bd">
        <open-data type="userNickName" lang="zh_CN"></open-data>
      </div>
      <navigator v-if="isWxAuth" url="/pages/order/main">
        <div class="weui-cell__ft weui-cell__ft_in-access">个人中心</div>
      </navigator>
      <navigator v-if="!isWxAuth" url="/pages/login/main">
        <div class="weui-cell__ft weui-cell__ft_in-access">请登录</div>
      </navigator>
    </div>

    <!-- <navigator url="" class="weui-media-box weui-media-box_appmsg" hover-class="weui-cell_active">
      <div class="weui-media-box__hd weui-media-box__hd_in-appmsg">
        <open-data type="userAvatarUrl" lang="zh_CN" class="weui-media-box__thumb"></open-data>
      </div>
      <div class="weui-media-box__bd weui-media-box__bd_in-appmsg">
        <div class="weui-media-box__title">
          <open-data type="userNickName" lang="zh_CN"></open-data>
        </div>
        <div class="weui-media-box__desc">
          <open-data type="userCity" lang="zh_CN"></open-data>
        </div>
      </div>
    </navigator> -->

    <div class="weui-grids">
      <block v-for="(item, index) in categories" :key="index">
        <navigator :url="'/pages/list/main?id=' + item.id" class="weui-grid" hover-class="weui-grid_active">
          <image class="weui-grid__icon" :src="CDN + '/static/images/' + item.icon" />
          <div class="weui-grid__label">{{item.name}}</div>
        </navigator>
      </block>
    </div>

    <div class="weui-panel weui-panel_access">
      <div class="weui-panel__hd">推荐内容</div>
      <div class="weui-panel__bd">
        <div class="weui-flex" v-for="(item, index) in cardList" :key="index">
          <div class="weui-flex__item">
            <navigator :url="'/pages/detail/main?id=' + item.id">
              <card :primaryTitle="item.name" :media="CDN + '/products/' + item.covers[1]"></card>
            </navigator>
          </div>
          <!-- <div class="weui-flex__item">
            <navigator :url="'/pages/detail/main?id=' + item[0].id">
              <card :primaryTitle="item[0].name" :media="CDN + '/products/' + item[0].covers[0]" :menuActions="menuActions" :rightAction="rightAction"></card>
            </navigator>
          </div>
          <div class="weui-flex__item">
            <navigator :url="'/pages/detail/main?id=' + item[1].id">
              <card :primaryTitle="item[1].name" :media="CDN + '/products/' + item[1].covers[0]" :menuActions="menuActions" :rightAction="rightAction"></card>
            </navigator>
          </div> -->
        </div>
      </div>
      <div class="weui-panel__ft">
        <!-- <div class="weui-cell weui-cell_access weui-cell_link">
          <div class="weui-cell__bd">查看更多</div>
          <div class="weui-cell__ft weui-cell__ft_in-access"></div>
        </div> -->
      </div>
    </div>

    <div class="weui-footer">
      <!-- <div class="weui-footer__links">
        <navigator url="" class="weui-footer__link">底部链接</navigator>
      </div> -->
      <div class="weui-footer__text">Copyright © 2018-2020 yzer.club</div>
      <div class="weui-footer__text">粤ICP备18132640号</div>
    </div>
  </div>
</template>

<script>
import card from '@/components/card'

import QueryIndex from '@/graphql/Query/Index.graphql'

export default {
  data () {
    return {
      swiperList: [],
      categories: [],
      menuActions: [{
        icon: 'share',
        handleClick: (event) => {
          // console.log(event)
        }
      }],
      actions: [{
        title: '详情',
        handleClick: (event) => {
          // console.log(event)
        }
      }, {
        title: '预定',
        handleClick: (event) => {
          // console.log(event)
        }
      }],
      inputShowed: false,
      inputVal: '',
      CDN: this.$CDN,
      cardList: [],
      isWxAuth: false
    }
  },

  components: {
    card
  },

  methods: {
    bindViewTap () {
      const url = '../logs/main'
      wx.navigateTo({ url })
    },
    getUserInfo () {
      // 调用登录接口
      wx.login({
        success: () => {
          wx.getUserInfo({
            success: (res) => {
              this.userInfo = res.userInfo
            }
          })
        }
      })
    },
    clickHandle (msg, ev) {
      // console.log('clickHandle:', msg, ev)
    },
    showInput () {
      this.inputShowed = true
    },
    hideInput () {
      this.inputVal = ''
      this.inputShowed = false
    },
    clearInput () {
      this.inputVal = ''
    },
    inputTyping (e) {
      // console.log(e)
      this.inputVal = e.mp.detail.value
    },
    queryData (isFetch) {
      this.$apollo.queryLoading({
        query: QueryIndex,
        fetchPolicy: (isFetch) ? 'network-only' : 'cache-first'
      }, result => {
        // console.log(result)
        const { categories, products } = result.data
        this.categories = categories
        // console.log(products)
        this.cardList = products
        // let item = []
        for (let i in products) {
          this.swiperList[i] = {
            src: products[i].covers[0],
            uri: products[i].id
          }
        }
        wx.stopPullDownRefresh()
      }, () => {
        // console.log(error)
        wx.showToast({
          icon: 'none',
          title: '获取数据失败, 请重试'
        })
        wx.stopPullDownRefresh()
      })
      const token = wx.getStorageSync('token')
      this.isWxAuth = !!token
    }
  },

  onLoad () {
    this.queryData()
  },
  onPullDownRefresh () {
    this.queryData(true)
  }
}
</script>

<style scoped>
.user-panel {
  font-size: 16px;
  line-height: 20px;
  padding: 4px 8px;
}
.swiper {
  width: 100%;
  height: 200px;
}

.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.userinfo-avatar {
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}

.userinfo-nickname {
  color: #aaa;
}

.usermotto {
  margin-top: 150px;
}

.form-control {
  display: block;
  padding: 0 12px;
  margin-bottom: 5px;
  border: 1px solid #ccc;
}
</style>
